<template>
  <div>
    <el-button v-if="!value" color="#FE2C55" referrerpolicy="unsafe-url" class="w-300px" type="success" @click="onGetDouyinGenUrl()">
      <i class="iconfont icon-dy-app" /><span>点击跳转授权111</span>
    </el-button>
    <template v-else>
      <el-button v-if="isAuth" type="success" class="w-300px" @click="dialogVisible = true">
        <i class="el-icon-check" />
        <span>已完成授权，点击查看</span>
      </el-button>
      <el-button v-else type="danger" class="w-300px" @click="onGetDouyinGenUrl(true)">
        <span>授权已失效，点击重新授权</span>
      </el-button>
    </template>
    <el-dialog v-model="dialogVisible" width="500px" title="授权详情">
      <el-descriptions v-if="info.app_id" :column="1" border>
        <el-descriptions-item label="AppId">{{ info.app_id }}</el-descriptions-item>
        <el-descriptions-item label="小程序名">{{ info.app_name }}</el-descriptions-item>
        <el-descriptions-item label="简介">{{ info.app_intro }}</el-descriptions-item>
        <el-descriptions-item label="图标">
          <img :src="info.app_icon" alt="" class="w-50px" />
        </el-descriptions-item>
        <el-descriptions-item label="类目">
          <p v-for="(item, key) in info.app_categories_audit_info" :key="key">{{ item.app_category_name }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="主体">{{ info.subject_audit_info?.subject_name }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="onGetDouyinGenUrl(true)">重新授权</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import { getDouyinAppInfo, getDouyinGenUrl } from '@/api/platform/app/douyin_open'
import emitter from '@/utils/mitt'

defineOptions({
  name: 'DouyinOpenButton'
})

const defaultApp = inject('defaultApp')

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  appId: {
    type: [String, Number],
    required: true
  }
})

const dialogVisible = ref(false)
const info = ref({})
const isAuth = ref(true)
const url = ref('')

const getDouyinAppInfoAction = () => {
  getDouyinAppInfo(defaultApp.value.id)
    .then((res) => {
      info.value = res.data
      // 发送授权信息到事件总线
      emitter.emit('douyin-auth-info', res.data)
    })
    .catch(() => {
      isAuth.value = false
    })
}

const onGetDouyinGenUrl = (again = false) => {
  getDouyinGenUrl(defaultApp.value.id)
    .then((res) => {
      url.value = res.data.url
      jumpToOauth(again)
    })
    .catch((res) => {})
}

const jumpToOauth = (again) => {
  if (again) {
    ElMessageBox.confirm('是否重新跳转授权页？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        window.open(url.value)
        // 刷新页面
      })
      .catch(() => {})
  } else {
    // 新窗口打开链接
    window.open(url.value)
    ElMessageBox.confirm('是否完成授权了？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        // 刷新页面
        window.location.reload()
      })
      .catch(() => {})
  }
}

// 监听对话框的显示状态，当显示时发送授权信息
watch(dialogVisible, (newVal) => {
  if (newVal && info.value.app_id) {
    emitter.emit('douyin-auth-info', info.value)
  }
})

onMounted(() => {
  if (props.value) {
    getDouyinAppInfoAction()
  }
})
</script>

<style scoped>
.icon-dy-app {
  font-size: 24px;
  margin-right: 10px;
  vertical-align: sub;
}
</style>
